{% extends "base.html" %}
{% block content %}

<style>
    body {
        margin: 0;
        width: 100vw;
    }

    .form-floating {
        flex-grow: 1;
    }

    button {
        margin: 0;
        padding: 4px;
        border-radius: 8px;
        outline: 0;
        border: 0;
        color: aliceblue;
        cursor: pointer;
        z-index: 10;
        font-size: 1.2rem;
        transition: .2s;
        width: 96px;
        align-self: flex-end;
    }
</style>


<script type="module">
    import { createApp } from 'https://unpkg.com/petite-vue?module'

    createApp({
        seq: '',
        // methods
        message: '...',
        sendSeq() {
            if (!this.seq) return
            for(let i=0;i< this.seq.length;i++)
                if(!['A','T','C','G'].includes(this.seq[i])){
                    alert('不能有字符:'+this.seq[i])
                    return
                }
                    
                    
            this.message = '判断中...'
            fetch('', { method: 'POST', body: JSON.stringify({ seq: this.seq }), headers: { "X-CSRFToken": $.cookie('csrftoken') } }).then(res => res.text()).then(data => {
                let [correct, incorrect] = data.slice(1, data.length - 1).split(' ')
                console.log(correct)
                correct = Math.floor((incorrect) * 100)
                const noBar = document.querySelector('.no')
                const yesBar = document.querySelector('.yes')
                noBar.style.width = `${correct}% `
                noBar.setAttribute('aria-valuenow', `${correct}`)
                yesBar.style.width = `${100 - correct}% `
                yesBar.setAttribute('aria-valuenow', `${100 - correct}`)
                // this.message = correct > 50 ? '它很可能是哦' : '它不是诶'
                this.message= 'probiotics：'+correct+'%'
                // +'non-probiotics:'+`${100 - correct}`+'%'
            })
        }
    }).mount()

</script>


{% verbatim %}
<div class="result progress">
    <div class="progress-bar bg-danger yes" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0"
        aria-valuemax="100"></div>
    <div class="progress-bar bg-success no" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0"
        aria-valuemax="100"></div>
</div>
{{message}}
<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100%"
        v-model="seq"></textarea>
    <label for="floatingTextarea">输入碱基序列</label>
</div>
<button @click="sendSeq" class="btn btn-primary" :class="seq ? '':'disabled'">检测</button>
{% endverbatim %}
{% endblock %}
